<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">  
	<meta name="apple-mobile-web-app-status-bar-style" content="black">  
	<meta content="telephone=no" name="format-detection">
	<%-- <link rel="stylesheet" href="<%=request.getContextPath()%>/resources/lib/jQuery-tck/css/common.css"/> --%>
	<style type="text/css">
		.search_diy{
			position: relative;
			z-index: 2;
			float: left;
			width: 20%;
			margin-bottom: 0;
			background-color: #f2f2f2;
		}
		<style type="text/css">
.myclass{isplay: block;
    width: 250px;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
	}
</style>

	</style>
	<title>Insert title here</title>

	<script type="text/javascript" src="<%=request.getContextPath()%>/resources/common/js/jquery.js"></script>
	<script type="text/javascript" src="<%=request.getContextPath()%>/resources/common/js/jquery.dataTables.min.js"></script>
	<script type="text/javascript" src="<%=request.getContextPath()%>/resources/common/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="<%=request.getContextPath()%>/resources/common/js/bootstrapValidator.min.js"></script>
	<script type="text/javascript" src="<%=request.getContextPath()%>/resources/common/js/common.js"></script>
	<script type="text/javascript" src="<%=request.getContextPath()%>/resources/common/js/echarts2/esl.js"></script>
	<%-- <script type="text/javascript" src="<%=request.getContextPath()%>/resources/common/js/echarts.js"></script> --%>

	<script type="text/javascript" src="<%=request.getContextPath()%>/resources/wineproduct/js/wineproduct.js"></script>
	<script type="text/javascript" src="<%=request.getContextPath()%>/resources/wineproduct/js/wineproduct_bootstrapValidator.js"></script> 
 	<link rel="stylesheet" href="<%=request.getContextPath()%>/resources/common/css/bootstrap.min.css"/> 
	<link rel="stylesheet" href="<%=request.getContextPath()%>/resources/common/css/jquery.dataTables.min.css"/> 
	<link rel="stylesheet" href="<%=request.getContextPath()%>/resources/common/css/bootstrapValidator.min.css"/> 

</head>
<body>
	 <div id="main" style="width:900px;height:400px"></div>

	<hr>
	<div class="col-lg-6">
		<div class="input-group">
			<span class="input-group-addon"> 商品名检索 </span> <input type="text"
				class="search_diy" id="searchByName">
		</div>
	</div>

	<div class="col-lg-6" style="margin-top:10px">
		<div class="input-group">
			<span class="input-group-addon"> 类型检索&nbsp&nbsp&nbsp</span> <input
				type="text" class="search_diy" id="searchByType">
		</div>
	</div>

     <br>
<!-- 	商品名检索<input type="text" id="searchByName" class="search_diy"/></br>
	类型检索<input type="text" id="searchByType" class="search_diy"/> -->
	</br>
	<button   class="btn btn-danger btn-sm" id="deleteAll">批量删除</button> 
	<button   class="btn btn-primary btn-sm addBtn" id="addWineProduct_button_id" >新 增</button>
		
	<div>
		<table id="example" class="table table-bordered table-header">
			<thead>
				<tr>
					<th>全选</br><input type="checkbox" name="allChecked" /></th>
					<th>id</th> 
					<th>产品名称</th>
					<th>类型</th>
					<th>生产地址</th>
					<th>酒精度</th>
				<!-- 	<th>生产厂商</th> -->
					<th>原料</th>
					<th>容量</th>
					<th>品质</th>
					<th>规格</th>
					<th>prodetail</th>
					<th>价格</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
			</tbody>		
		</table>
	</div>
	<!-- 引入新增bootstrap弹框jsp -->
	<jsp:include page="list_add.jsp"></jsp:include>
	<jsp:include page="list_update.jsp"></jsp:include>
<!-- 	
 				删除页面开始
<div class="modal fade" id="myModal-deleteWineProduct-info" tabindex="-1" role="dialog"
                 aria-labelledby="myModalLabel" aria-hidden="true">
          <div class="modal-dialog">
              <div class="modal-content">
                  <div class="modal-header">
                      <button type="button" class="close"
                              data-dismiss="modal" aria-hidden="true">
                          &times;
                      </button>
                      <h4 class="modal-title" >
                        删除
                      </h4>
                  </div>
                      <div class="modal-footer">
                          <button type="button" class="btn btn-default"
                                  data-dismiss="modal">关闭
                          </button>onclick="addRole_button_ajax()" 
                          <button type="button" id="add_button_id" class="btn btn-primary" >提交</button>
                          
                      </div>
              </div>/.modal-content
          </div>
 </div> -->
            
     <div id="hello"></div> 
     <script type="text/javascript">
     //------------------------------例子1-----begin-------------------------------------------
     // 基于准备好的dom，初始化echarts实例
     /* var myChart = echarts.init(document.getElementById('main'));

     var option={
         backgroundColor: '#2c343c',
         textStyle: {
                     color: 'rgba(255, 255, 255, 0.3)'
                 },
         series : [
             {
                 name: '访问来源',
                 type: 'pie',
                 radius: '55%',
                 data:[
                     {value:400, name:'搜索引擎'},
                     {value:335, name:'直接访问'},
                     {value:310, name:'邮件营销'},
                     {value:274, name:'联盟广告'},
                     {value:235, name:'视频广告'}
                 ],
                 roseType: 'angle',

                 itemStyle: {
                     emphasis: {
                         shadowBlur: 200,
                         shadowColor: 'rgba(0, 0, 0, 0.5)'
                     }
                 },
                 label: {
                     normal: {
                         textStyle: {
                             color: 'rgba(255, 255, 255, 0.3)'
                         }
                     }
                 },
                 labelLine: {
                     normal: {
                         lineStyle: {
                             color: 'rgba(255, 255, 255, 0.3)'
                         }
                     }
                 }

             }
         ]
     }


     // 使用刚指定的配置项和数据显示图表。
     myChart.setOption(option); */
     //------------------------------例子1-----end-------------------------------------------
     
   // 使用
    /*     var require = {

         };
        var option = {

        }; */
    //-----------------------emaple2-----------begin------------------------------------------
<%--         require(
       [
         'echarts',
         'echarts/chart/bar', // 使用柱状图就加载bar模块，按需加载
       ],
       function (ec) {
         // 基于准备好的dom，初始化echarts图表
         var myChart = ec.init(document.getElementById('main')); 
         //设置数据
         var option = {

         }; 

         // 为echarts对象加载数据 
         myChart.setOption(option); 
       }
     );
  // 路径配置
     require.config({
       paths: {
         echarts: '<%=request.getContextPath()%>/resources/common/js/echarts'
       }
     });


      option = {
    	      //设置坐标轴
    	      xAxis : [
    	        {
    	          type : 'category',
    	          data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子","帽子","围巾"]
    	        }
    	      ],
    	      yAxis : [
    	        {
    	          type : 'value'
    	        }
    	      ],
    	      //设置数据
    	      series : [
    	        {
    	          "name":"销量",
    	          "type":"bar",
    	          "data":[5, 20, 40, 10, 24, 20,24,32],
    	        }
    	      ]
    	    };  --%>

//----------------------emaple2------------------end--------------------------------------    
	require.config({
        paths:{
            echarts:'<%=request.getContextPath()%>/resources/common/js/echarts2/echarts',
            'echarts/chart/bar' : '<%=request.getContextPath()%>/resources/common/js/echarts2/echarts',
            'echarts/chart/line': '<%=request.getContextPath()%>/resources/common/js/echarts2/echarts',
            'echarts/chart/pie': '<%=request.getContextPath()%>/resources/common/js/echarts2/echarts'
        }
    });
	require(
	        [
	            'echarts',
	            'echarts/chart/bar',
	            'echarts/chart/line',
	            'echarts/chart/pie'
	        ],
	        function(ec) {
	            var myChart = ec.init(document.getElementById('main'));
	            var option = {
	                tooltip : {
	                    trigger: 'axis'//item
	                },
	                legend: {//说明
	                    data:['蒸发量','降水量']
	                },
	                toolbox: {
	                    show : true,
	                    feature : {
	                        mark : true,
	                        dataView : {readOnly: false},
	                        magicType:['line', 'bar','pie'],
	                        restore : true,
	                        saveAsImage : true
	                    }
	                },
	                calculable : true,
	                xAxis : [//直角坐标系中的横轴，通常并默认为类目型
	                    {
	                        type : 'category',
	                        data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
	                    }
	                ],
	                yAxis : [//	直角坐标系中的纵轴，通常并默认为数值型
	                    {
	                        type : 'value',
	                        splitArea : {show : true}
	                    }
	                ],
	                series : [
	                    {
	                        name:'蒸发量',
	                        type:'bar',//在此处更改图表类型，line折线图，bar柱形图，pie饼图；
	                        data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
	                    }
	                      ,
	                    {
	                        name:'降水量',
	                        type:'bar',
	                        data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
	                    }  
	                ]
	            };
	                                              
	            myChart.setOption(option);
	        }
	    );

     
     
     </script>    
</body>
</html>